<template>
  <div class="statistical-analysis">
    <el-card class="tabs-card">
      <el-tabs class="custom-tabs" v-model="activeName" tab-position="top" @tab-click="handleTabClick">
        <el-tab-pane name="personnelSafety">
          <span slot="label"><i class="el-icon-user-solid"></i> 人 · 人员安全</span>
          <div class="card-container">
            <personnel-safety ref="personnelSafety"/>
          </div>
        </el-tab-pane>
        <el-tab-pane name="equipmentSafety">
          <span slot="label"><i class="el-icon-s-tools"></i> 机 · 设备安全</span>
          <div class="card-container">
            <equipment-safety ref="equipmentSafety"/>
          </div>
        </el-tab-pane>
        <el-tab-pane name="materialsProtection">
          <span slot="label"><i class="el-icon-s-cooperation"></i> 料· 物资与防护</span>
          <div class="card-container">
            <materials-protection ref="materialsProtection"/>
          </div>
        </el-tab-pane>
        <el-tab-pane name="systemImplementation">
          <span slot="label"><i class="el-icon-s-flag"></i> 法 · 制度与执行</span>
          <div class="card-container">
            <system-implementation ref="systemImplementation"/>
          </div>
        </el-tab-pane>
        <el-tab-pane name="environmentRisk">
          <span slot="label"><i class="el-icon-s-open"></i> 人· 环境与风险</span>
          <div class="card-container">
            <environment-risk ref="environmentRisk"/>
          </div>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>

</template>

<script>
import personnelSafety from '@/views/components/configuration/personnelSafety.vue';
import equipmentSafety from '@/views/components/configuration/equipmentSafety.vue';
import materialsProtection from '@/views/components/configuration/materialsProtection.vue';
import systemImplementation from '@/views/components/configuration/systemImplementation.vue';
import environmentRisk from '@/views/components/configuration/environmentRisk.vue';

export default {
  name: "StatisticalAnalysis",
  components: {
    personnelSafety,
    equipmentSafety,
    materialsProtection,
    systemImplementation,
    environmentRisk
  },
  data() {
    return {
      activeName: 'personnelSafety',
    }
  },
  methods: {
    handleTabClick(tab) {
      setTimeout(() => { // 100ms 延迟，确保组件渲染完成
        if (tab.name === "personnelSafety" && this.$refs.personnelSafety) {
          this.$refs.personnelSafety.handleChartResize();
        } else if (tab.name === "equipmentSafety" && this.$refs.equipmentSafety) {
          this.$refs.equipmentSafety.handleChartResize();
        } else if (tab.name === "materialsProtection" && this.$refs.materialsProtection) {
          this.$refs.materialsProtection.handleChartResize();
        } else if (tab.name === "systemImplementation" && this.$refs.systemImplementation) {
          this.$refs.systemImplementation.handleChartResize();
        } else if (tab.name === "environmentRisk" && this.$refs.environmentRisk) {
          this.$refs.environmentRisk.handleChartResize();
        }
      }, 100);
    }
  }
}
</script>

<style lang="scss" scoped>
.statistical-analysis {
  z-index: 1;
  min-height: calc(100vh - (72 / 1080 * 100vh));
  background: rgba(0,11,61,0.8);
  padding: 10px;

  ::v-deep .el-form-item__label {
    color: #ffffff;
  }
}

.tabs-card {
  border-radius: 8px;
  width: 100%;
  background: rgba(0,11,61,0.8);
  color: #fff;
  border-width: #{px2vw(1)};
  border-style: solid;

  // 2. 渐变边框背景（核心样式，颜色部分无需转换）
  border-image: linear-gradient(
      180deg,
      rgba(22, 93, 255, 0),
      rgba(22, 93, 255, 0.59),
      rgba(22, 93, 255, 1)
  ) 1 1;
}

.custom-tabs {

  .basic-span {
    margin-top: 16px;
  }

  ::v-deep .el-card__body {
    padding: 20px 0 0 0;
  }

  ::v-deep .el-tabs__active-bar {
    background-color: transparent;
  }

  ::v-deep.el-tabs__nav {
    margin-bottom: 12px;
  }

  ::v-deep .el-tabs__item {
    padding: 0px 25px !important;
    box-sizing: border-box;
    display: inline-block;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: #ffffff;
    position: relative;
  }

  ::v-deep .el-tabs__item.is-active {
    color: #fff;
    background-color: #486ff2;
    border-radius: 4px;
    height: 32px;
    line-height: 34px;
  }
}
</style>
